import {
    Card,
    Table,
    Button,
    Col,
    Input,
    Row,
    message,
} from 'antd';
import React, { Component, createRef } from 'react';

import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import { UserModelState } from '@/models/user';

import styles from './style.less';

interface TableListProps extends FormComponentProps {
    dispatch: Dispatch<any>;
    loading: boolean;
    user: UserModelState;
}

interface TableListState {
    offset: number;
    limit: number;
}

/* eslint react/no-multi-comp:0 */
@connect(
    ({
        user,
        loading,
    }: {
        user: UserModelState;
        loading: {
            models: {
                [key: string]: boolean;
            };
        };
    }) => ({
        user,
        loading: loading.models.product,
    }),
)
class TableList extends Component<TableListProps, TableListState> {
    state: TableListState = {
        offset: 1,
        limit: 10,
    };

    searchInput = createRef<Input>();

    componentDidMount() {
        this.fetchProduct();
    }

    fetchProduct = () => {
        const { offset, limit } = this.state;
        const { dispatch } = this.props;
        dispatch({
            type: 'user/fetch',
            payload: {
                offset,
                limit
            }
        });
    }

    handleSearch = () => {
        const { value } = this.searchInput.current!.state;
        const { dispatch } = this.props;

        if (value) {
            dispatch({
                type: 'user/fetch',
                payload: {
                    offset: 1,
                    limit: 10,
                    username: value
                }
            });
        } else {
            message.error('请输入用户名');
        }
    };

    render() {
        const {
            user,
            loading
        } = this.props;
        return (
            <PageHeaderWrapper>
                <Card bordered={false}>
                    <Row
                        gutter={{ md: 8, lg: 24, xl: 48 }}
                        style={{ marginBottom: 24 }}>
                        <Col
                            md={8} sm={24}>
                            <Input
                                placeholder="请输入产品名称"
                                ref={this.searchInput} />
                        </Col>
                        <Col
                            md={8} sm={24}>
                            <Button
                                type="primary"
                                onClick={this.handleSearch}>查询</Button>
                        </Col>
                    </Row>
                    <div className={styles.tableList}>
                        <Table
                            rowKey='user_id'
                            columns={[{
                                title: '用户ID',
                                dataIndex: 'user_id',
                            }, {
                                title: '用户名',
                                dataIndex: 'user_name',
                            }, {
                                title: '手机号',
                                dataIndex: 'user_phone',
                            }, {
                                title: '头像',
                                dataIndex: 'user_avatarl',
                                render: url => <img src={url} />
                            }, {
                                title: '省',
                                dataIndex: 'user_province',
                            }, {
                                title: '市',
                                dataIndex: 'user_city',
                            }, {
                                title: '区',
                                dataIndex: 'user_country',
                            }, {
                                title: '创建时间',
                                dataIndex: 'createdAt',
                            }, {
                                title: '更新时间',
                                dataIndex: 'updatedAt',
                            }]}
                            loading={loading}
                            dataSource={user.data.rows} />
                    </div>
                </Card>
            </PageHeaderWrapper>
        );
    }
}

export default TableList;  